<template>
	<view>
		<view class="input">
			<view class="input_left">
				用户名:
			</view>
			<view class="input_right">
				<input class="uni-input" v-model="name" placeholder="请输入用户名" @blur="usernames()" />
				<view class="textdTips">
					{{nameTips}}
				</view>
			</view>
		</view>
		<view class="input">
			<view class="input_left">
				旧密码:
			</view>
			<view class="input_right">
				<input class="uni-input" v-model="password" placeholder="请填写旧密码" @blur="passwords()"/>
				<view class="textdTips">
					{{passwordTips}}
				</view>
			</view>
		</view>
		<view class="input">
			<view class="input_left">
				新密码:
			</view>
			<view class="input_right">
				<input class="uni-input" v-model="newpassword" placeholder="请输入新的密码" @blur="newpasswords()"/>
				<view class="textdTips">
					{{newpasswordTips}}
				</view>
			</view>
		</view>
		<view class="input">
			<view class="input_left">
				确认密码：
			</view>
			<view class="input_right">
				<input class="uni-input" v-model="okpassword" placeholder="请再次输入新密码" @blur="okpasswords()"/>
				<view class="textdTips">
					{{okpasswordTips}}
				</view>
			</view>
		</view>
		
		<button>提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				password: '',
				newpassword: '',
				okpassword: '',
				nameTips: '',
				passwordTips: '',
				newpasswordTips: '',
				okpasswordTips: ''
			}
		},
		methods: {
			usernames() {
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (this.name == "") {
					return this.nameTips = "用户名不能为空";
					// return false;
				} else if (!reg_tel.test(this.name)) {
					return this.nameTips = "请正确填写您的手机号码！";
					// alert("请正确填写您的手机号码！");
				} else {
					this.valueName = false;
					return this.nameTips = ''
				}
			},
			passwords() {
				if (this.password == '') {
					this.nameTips = '';
					this.newpasswordTips = '';
					this.okpasswordTips = '';
					return this.passwordTips = "密码不能为空";
				
				} else if (this.password.length < 6) {
					this.nameTips = '';
					this.nameTips = '';
					this.newpasswordTips = '';
					this.okpasswordTips = '';
					return this.passwordTips = "大于六个字符";
				
				}else {
					return this.passwordTips = ''
				}
			},
			newpasswords() {
				if (this.newpassword == '') {
					this.nameTips = '';
					this.passwordTips = '';
					this.okpasswordTips = '';
					return this.newpasswordTips = "新密码不能为空";
				
				} else if (this.newpassword.length < 6) {
					this.nameTips = '';
					this.nameTips = '';
					this.passwordTips = '';
					this.okpasswordTips = '';
					return this.newpasswordTips = "新密码必须大于六个字符";
				
				}else {
					return this.newpasswordTips = ''
				}
			},
			okpasswords() {
				if (this.okpassword == '') {			
					this.nameTips = '';
					this.passwordTips = '';
					this.newpasswordTips = '';
					return this.okpasswordTips = "密码不能为空";
				
				} else if (this.okpassword==this.newpassword) {
					this.nameTips = '';
					this.passwordTips = '';
					this.newpasswordTips = '';
					return this.okpasswordTips = "两次输入的密码不相等";
				
				}else {
					return this.okpasswordTips = ''
				}
			},
			// form() {
			// 	console.log(this.name, this.password)
			// 	if (this.password == '') {
			// 		this.nameTips = '';
			// 		return this.passwordTips = "密码不能为空";

			// 	} else if (this.password.length < 6) {
			// 		this.nameTips = '';
			// 		return this.passwordTips = "大于六个字符";

			// 	} else {
			// 		this.nameTips = '';
			// 		this.passwordTips = '';
			// 		uni.reLaunch({
			// 			url: '/pages/head/head'
			// 		});
			// 		console.log(11)
			// 	}
			// }
		}
	}
</script>

<style scoped>
	.input {
		width: 100%;
		height: 60px;
		line-height: 40px;
		display: flex;
		flex-wrap: nowrap;
		background-color: #FFF;
	}

	.input_left {
		width: 20%;
		padding-left: 20px;
		font-size: 14px
	}

	.input_right {
		width: 80%;
	}

	.uni-input {
		background-color: #fff;
		width: 100%;
		height: 30px;
		text-indent: 10px;
		border-radius: 5px;
		margin-top: 4px;
		border-top: 0px;
		border-left: 0px;
		border-right: 0px;
		border-bottom: solid 1px #c0c0c0;
	}
	
	.textdTips {
		font-size: 12px;
		height: 25px;
		color: red;
		margin-top: -10px;
	}
</style>
